<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生基本信息管理</title>
    <script src="../sys/vue.min.js"></script>
    <style>
        table#stu{
            width: 100%;
            height: 100%;;
            align-content:center;           
            border: 2px solid black;
        }
        table#stu tr{
            height: 50px;
        }
        table#stu tr td{
            border: 1px solid #877777;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 style="color:brown; text-align: center;">学生基本信息管理</h2>
        <hr width="100%" />
        <br />

        学号：<input style="width:100px;" v-model="no" type="text" value="" />
        姓名：<input style="width:50px;"  v-model="name" type="text" value="" />
        性别：<select v-model="sex">
                    <option value="男">男</option>
                    <option value="女">女</option>   
            </select>
        生日：<input style="width:60px;"  v-model="birth" type="text" value="" />
        班级：<select v-model="iclass">
                <option value="信息20-1班">信息20-1班</option>
                <option value="信息20-2班">信息20-2班</option>   
            </select>
        住所：<input style="width:100px;"  v-model="address" type="text" value="" />
        <input type="button" @click="addStu()" value="新增/修改" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input id="txtsearch" v-model="mytext" type="text" />
        <input type="button"  @click="select()" value="搜索" />
        <input type="button"  @click="back()" value="返回" />

        <br /><br />
        <table id="stu" cellpadding="0" cellspacing="0">
            <tr>
                <td>序号</td>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>出身年月日</td>
                <td>班级</td>
                <td>宿舍位置</td>
                <td>操作</td>
            </tr>            
            <tr v-for="(stu, i) in arrStu" :key="stu.no">
                <td>{{i+1}}</td>
                <td>{{stu.no}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.sex}}</td>
                <td>{{stu.birth}}</td>
                <td>{{stu.iclass}}</td>
                <td>{{stu.address}}</td>
                <td>
                    <input type="button" @click="delStu(stu.no)" value="删除" />
                    <input type="button" @click="mod(i)"    value="修改" />
                </td>
            </tr>
        </table>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                arrStu : [
                    {
                        xh:1,
                        no:'20210101',
                        name:'王诗雨',
                        sex:'女',
                        birth:'2001-8-6',
                        iclass:'信息20-1班',
                        address:'12号楼'
                    },
                    {
                        xh:2,
                        no:'20210211',
                        name:'苏俊逸',
                        sex:'男',
                        birth:'2001-7-8',
                        iclass:'信息20-2班',
                        address:'11号楼'
                    },
                    {
                        xh:3,
                        no:'20210115',
                        name:'王琳欣',
                        sex:'女',
                        birth:'2002-3-8',
                        iclass:'信息20-1班',
                        address:'12号楼'
                    },
                    {
                        xh:4,
                        no:'20210116',
                        name:'白艳明',
                        sex:'男',
                        birth:'2002-5-6',
                        iclass:'信息20-2班',
                        address:'11号楼'
                    }
                ],
                jsonArr: [],
                mytext:'',
                no:"",
                name:"",
                sex:"男",
                birth:"",
                iclass:"信息20-1班",
                address:"",
                modi: null
            },
            methods: {
                addStu() {
                    var s = {
                        xh:this.arrStu.length + 1,
                        no:this.no,
                        name:this.name,
                        sex:this.sex,
                        birth:this.birth,
                        iclass:this.iclass,
                        address:this.address
                    };
                    if (this.no == null
                        || this.no == undefined
                        || this.no == '') {
                        alert("学号不能为空！")
                        return
                    }
                    if (this.name == null
                        || this.name == undefined
                        || this.name == '') {
                        alert("姓名不能为空！")
                        return
                    }
                    if (this.birth == null
                        || this.birth == undefined
                        || this.birth == '') {
                        alert("生日不能为空！")
                        return
                    }
                    if (this.address == null
                        || this.address == undefined
                        || this.address == '') {
                        alert("住所不能为空！")
                        return
                    }
                   

                    if (this.modi != null) {
                        this.$set(this.arrStu, this.modi, s)
                        this.modi = null // 更新后，保证下次点击是新增效果
                    } 
                    else { // 新增
                        this.arrStu.push(s);
                        this.no = '';
                        this.name = '';
                        this.birth = '';
                        this.address = '';
                    }

                    this.no = '';
                    this.name = '';
                    this.birth = '';
                    this.address = '';
				
                },


                delStu(_no){
                    for(var i=0; i<this.arrStu.length;i++){
                        if(this.arrStu[i].no==_no){
                            this.arrStu.splice(i,1);
                            break;
                        }
                    }
                } ,


                // 修改功能
                mod(i) 
                {
                    // 取出要修改的对象信息
                    const modObj = this.arrStu[i]
                    this.no = modObj.no
                    this.name = modObj.name
                    this.sex = modObj.sex
                    this.birth = modObj.birth
                    this.iclass = modObj.iclass
                    this.address = modObj.address
                    this.modi = i 
                },

                select()
                {
				
				if (this.mytext) 
                {
					this.jsonArr = this.arrStu;
					var list = this.arrStu.filter(item => item.no.indexOf(this.mytext) > -1 || item.name.indexOf(this.mytext)>-1||item.sex.indexOf(this.mytext) >
						-1||item.birth.indexOf(this.mytext) > -1||item.iclass.indexOf(this.mytext) > -1||item.address.indexOf(this.mytext) > -1);
					if (list.length != 0) {
						alert("查找成功");
						this.arrStu = list;
					} else {
						alert("查找失败");
						this.arrStu = []
					}
					//清空输入
					this.mytext = ''
				} 
                else 
                {
					alert("请输入要查找的相关信息");
				}
			    },

                back()
                {
                    this.arrStu = this.jsonArr ;
                } 





                





                
          } 
        });
        
    </script>
</body>
</html>